<template>
  <div class="info-content">
    <div class="touristLoginPhoneMessage" @click="handelClick">
      <Avatar mode="customer" :isTourist="isTourist" :size="40" />
      <span class="text">{{$t('common.base.clickToRelogin')}}</span>
    </div>
  </div>
</template>

<script>
import Avatar from '@src/modules/im/imChat/components/messageBox/chattingRecords/components/Avatar.vue'
export default {
  name: 'tourist-login-phone-message',
  components: {
    Avatar,
  },
  props: {
    userDetail: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
    };
  },
  computed: {
    isTourist() {
      return this.userDetail?.registerType === 4;
    },
  },
  methods: {
    handelClick() {
      this.$message.warning(this.$t('im.imChat.components.messageBox.chattingRecords.components.touristLoginPhoneMessage.tips1'));
    },
  },
};
</script>

<style scoped lang='scss'>
.info-content{
  border: 0 !important;
  padding: 0 !important;
}
.touristLoginPhoneMessage {
  width: 280px;
  height: 64px;
  background: url(@src/assets/img/im/noLogin_bg.png);
  background-size: 100% 100%;
  box-shadow: 0px 2px 12px 0px $color-primary-light-2;;
  border-radius: 8px;
  display: flex;
  align-items: center;
  cursor: pointer;
  .text {
    font-size: 14px;
    font-weight: bold;
    color: #191f25;
  }
  ::v-deep .head_icon {
    margin: 0 20px;
  }
}
</style>